import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';

class NavDrawer extends StatelessWidget {
  final int selectedIndex;
  final ValueChanged<int> onTap;
  const NavDrawer({super.key, required this.selectedIndex, required this.onTap});

  static const List<Map<String, dynamic>> _navItems = [
    {'title': '推荐', 'icon': Icons.wb_sunny_outlined},
    {'title': '精选', 'icon': Icons.filter_list},
    {'title': '播客', 'icon': Icons.podcasts},
    {'title': '漫游', 'icon': Icons.navigation},
    {'title': '关注', 'icon': Icons.favorite_border, 'showDot': true},
    {'title': '我喜欢的音乐', 'icon': Icons.favorite_border},
    {'title': '最近播放', 'icon': Icons.history},
    {'title': '我的播客', 'icon': Icons.mic},
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      child: Container(
        color: Colors.white,
        child: Column(
          children: [
            // 网易云音乐 Logo
            Container(
              height: 70,
              padding: const EdgeInsets.all(16),
              child: MoveWindow(
                child: Row(
                  children: [
                    Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Icon(
                        Icons.music_note,
                        color: Colors.white,
                        size: 20,
                      ),
                    ),
                    const SizedBox(width: 8),
                    const Text(
                      '网易云音乐',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Colors.black87,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // 导航菜单
            Expanded(
              child: ListView.builder(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                itemCount: _navItems.length + 3, // 额外空间用于分组标题
                itemBuilder: (context, index) {
                  if (index == 5) {
                    // 我的音乐分组标题
                    return const Padding(
                      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                      child: Text(
                        '我的音乐',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 12,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    );
                  }
                  if (index == _navItems.length + 1) {
                    // 创建的歌单分组标题
                    return const Padding(
                      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                      child: Row(
                        children: [
                          Text(
                            '创建的歌单',
                            style: TextStyle(
                              color: Colors.grey,
                              fontSize: 12,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Spacer(),
                          Icon(Icons.add, size: 16, color: Colors.grey),
                        ],
                      ),
                    );
                  }
                  if (index == _navItems.length + 2) {
                    // 底部空间
                    return const SizedBox(height: 50);
                  }
                  
                  int itemIndex = index;
                  if (index > 5) itemIndex--; // 调整索引
                  if (index > _navItems.length) itemIndex--;
                  
                  if (itemIndex >= _navItems.length) return const SizedBox.shrink();
                  
                  final item = _navItems[itemIndex];
                  return _buildNavItem(
                    item['title'],
                    item['icon'],
                    itemIndex,
                    showDot: item['showDot'] == true,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNavItem(String label, IconData icon, int index, {bool showDot = false}) {
    final isSelected = index == selectedIndex;
    
    return Container(
      margin: const EdgeInsets.only(bottom: 2),
      child: Material(
        color: isSelected ? Colors.red.withOpacity(0.1) : Colors.transparent,
        borderRadius: BorderRadius.circular(6),
        child: InkWell(
          borderRadius: BorderRadius.circular(6),
          onTap: () => onTap(index),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
            child: Row(
              children: [
                Icon(
                  icon,
                  size: 18,
                  color: isSelected ? Colors.red : Colors.grey.shade600,
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    label,
                    style: TextStyle(
                      fontSize: 13,
                      color: isSelected ? Colors.red : Colors.black87,
                      fontWeight: isSelected ? FontWeight.w500 : FontWeight.normal,
                    ),
                  ),
                ),
                if (showDot)
                  Container(
                    width: 6,
                    height: 6,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


